<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>基于Jquery的iframe tab标签组件使用方法</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tab.js"></script>
<style type="text/css">
@IMPORT url("tab.css");

h2 {
	background-color: #cccccc;
	padding: 4px;
	font-size: 18px;
	font-family: "黑体";
}

#tab_menu {
	padding: 0px;
	width: 100%;
	height: 60px;
	overflow: hidden;
}

#page {
	width: 800px;
	height: 400px;
	border: solid 1px #cccccc;
	/*height: expression(parentNode . parentNode . offsetHeight-25);*/
}
</style>
<script language="javascript">
var tab=null;
$( function() {
	  tab = new TabView( {
		containerId :'tab_menu',
		pageid :'page',
		cid :'tab_po',
		position :"bottom"
	});
	tab.add( {
		id :'tab1_id_index1',
		title :"百度主页",
		url :"http://www.baidu.com",
		isClosed :true
	});
	tab.add( {
		id :'tab2_id_index2',
		title :"谷歌主页",
		url :"http://www.google.cn",
		isClosed :false
	});
	tab.add( {
		id :'tab3_id_index3',
		title :"我的主页",
		url :"http://blog.csdn.net/myloon",
		isClosed :false
	});
	tab.add( {
		id :'tab4_id_index4',
		title :"标签页面1",
		url :"tabs/tab1.html",
		isClosed :true
	});
	
});
var index=1;
function addTab(){
	var id='tab5_id_index'+(index+12);
	var name=document.getElementById("tab_name").value;
	var url=document.getElementById("tab_url").value;
	var close=$("input:radio:checked").val().toString();
 
	tab.add( {
		id :id,
		title :name==""?("标签页面"+(index+1)):name,
		url :url==""?("tabs/tab"+((index%3)+1)+".html"):url,
		isClosed :close=='1'?true:false
	});
	index++;
	
}
</script>
</head>
<body>
<form id="form1">
<h1 align="center">基于Jquery的iframe 可关闭tab标签组件使用方法</h1>
<p>
<p>特点：位置可上可下、可关闭、可添加、可激活。</p>
<h2>先睹为快，看看效果</h2>
<img src="images/tab.jpg" />
<h2>1、安装,引入类库</h2>
<p>
<pre>
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;tab.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt; 
@IMPORT url(&quot;tab.css&quot;); 
&lt;/style&gt;

</pre>
</p>
<h2>2、使用方法</h2>
<p>
<pre>
	var tab = new TabView( {
		containerId :'tab_menu',  	标签容器ID
		pageid :'page', 		页面容器Id
		cid :'tab_po', 			指定tab ID
		position :"bottom"    		tab位置，只支持top和bottom
	});
	添加tab
	tab.add( {
		id :'tab1_id_index1',		标签ID
		title :"百度主页",		标签标题
		url :"http://www.baidu.com",	该标签所链接的URL地址
		isClosed :true			是否可以关闭标签
	});
</pre>
</p>
<h2>3、API参考</h2>
<p>
<pre>
	<b>add(option)： </b>
		添加一个新标签，例如：
				tab.add( {
					id :'tab1_id_index1',		标签ID
					title :"百度主页",		标签标题
					url :"http://www.baidu.com",	该标签所链接的URL地址
					isClosed :true			是否可以关闭标签
				});
	<b>update(option)：</b>
			更新标签,例如：
				tab.update({
							id : uid,
							url : url,
							title : title
				});
	<b>activate(id)：</b>
			激活一个标签，例如：
			tab.activate(tab_id)；
	<b>close(id)</b>
			关闭一个标签,例如：
			tab.close(tab_id);
</pre>
</p>
<h2>4、例子</h2>
<p>标签名称：<input type="text" id="tab_name" /><br />
URL：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="tab_url" /><br />
可关闭：<input type="radio" id="tab_close1" name="tab_close" value="1" /><label for="tab_close1">可关闭</label> <input type="radio" id="tab_close2"
	name="tab_close" value="0" /><label for="tab_close2">不可关闭</label> <br />
&nbsp;&nbsp;&nbsp;<a href="javascript:addTab()">添加</a></p>
<p>
<div id="page"></div>
<div id="tab_menu"></div>
</p>
</p>
</form>
</body>
</html>